<template>
	<view class="page">
		<image class="fs-full" src="/static/cp.png" mode="widthFix"></image>

		<view class="fs-full fs-py32">

			<fui-form ref="form2" labelWidth="240" labelColor='#666'>
				<view v-for="(item,index) in formData.products" :key="index" class="">
					<fui-card :title="`产品${index+1}`" :margin="['24rpx', '24rpx']">
						<productTypePicker v-model:product_type="item.product_type"
							v-model:product_subdivision="item.product_subdivision" />

						<fui-form-item label="实际收款" asterisk>
							<fui-input @blur="handlePaymentInput($event,item,'actual_payment')"
								v-model:modelValue="item.actual_payment" type="digit" placeholder="请输入实际收款"
								:borderBottom="false" :padding="[0]"></fui-input>
						</fui-form-item>

						<accountEnableDate v-model:account_start_date="item.account_start_date" />

						<agencyStartDate v-model:agency_start_month="item.agency_start_month" />

						<agencyEndDate v-model:agency_end_month="item.agency_end_month" />

						<fui-form-item label="代账月份">
							<fui-input v-if="item.agency_start_month && item.agency_end_month"
								v-model="item.agency_months" disabled placeholder="输入起始、终止自动计算" :borderBottom="false"
								:padding="[0]"></fui-input>
							<fui-input v-else disabled placeholder="输入起始、终止自动计算" :borderBottom="false"
								:padding="[0]"></fui-input>
						</fui-form-item>

						<fui-form-item label="注册区域">
							<fui-input v-model="item.register_region" placeholder="请输入注册区域" :borderBottom="false"
								:padding="[0]"></fui-input>
						</fui-form-item>

						<urgentPicker :key='index' v-model:is_urgent="item.is_urgent" />

						<fui-section title="成本" isLine lineWidth='4px' :marginTop="24"></fui-section>
						<view class="fs-flex fs-justify__between fs-flex__wrap">
							<fui-form-item label="刻章成本" labelSize="26" style="width: 50%;" labelWidth='150'>
								<fui-input @blur="handleCostInput($event,item,'kezhang_chengben')"
									v-model="item.cost.kezhang_chengben" type="digit" size="26" placeholder="请输入"
									:borderBottom="false" :padding="[0]">
									<slot name="default">
										<view class="fs-color__subtitle">￥</view>
									</slot>
								</fui-input>
							</fui-form-item>
							<fui-form-item label="报税软件" labelSize="26" style="width: 50%;" labelWidth='150'>
								<fui-input @blur="handleCostInput($event,item,'baoshui_ruanjian')"
									v-model="item.cost.baoshui_ruanjian" type="digit" size="26" placeholder="请输入"
									:borderBottom="false" :padding="[0]">
									<slot name="default">
										<view class="fs-color__subtitle">￥</view>
									</slot>
								</fui-input>
							</fui-form-item>
							<fui-form-item label="数字证书" labelSize="26" style="width: 50%;" labelWidth='150'>
								<fui-input @blur="handleCostInput($event,item,'shuzi_zhengshu')"
									v-model="item.cost.shuzi_zhengshu" type="digit" size="26" placeholder="请输入"
									:borderBottom="false" :padding="[0]">
									<slot name="default">
										<view class="fs-color__subtitle">￥</view>
									</slot>
								</fui-input>
							</fui-form-item>
							<fui-form-item label="渠道成本" labelSize="26" style="width: 50%;" labelWidth='150'>
								<fui-input @blur="handleCostInput($event,item,'qudao_chengben')"
									v-model="item.cost.qudao_chengben" type="digit" size="26" placeholder="请输入"
									:borderBottom="false" :padding="[0]">
									<slot name="default">
										<view class="fs-color__subtitle">￥</view>
									</slot>
								</fui-input>
							</fui-form-item>
							<fui-form-item label="园区地址" labelSize="26" style="width: 50%;" labelWidth='150'>
								<fui-input @blur="handleCostInput($event,item,'yuanqu_dizhi')"
									v-model="item.cost.yuanqu_dizhi" type="digit" size="26" placeholder="请输入"
									:borderBottom="false" :padding="[0]">
									<slot name="default">
										<view class="fs-color__subtitle">￥</view>
									</slot>
								</fui-input>
							</fui-form-item>
							<fui-form-item label="加急费用" labelSize="26" style="width: 50%;" labelWidth='150'>
								<fui-input @blur="handleCostInput($event,item,'jiaji_feiyong')"
									v-model="item.cost.jiaji_feiyong" type="digit" size="26" placeholder="请输入"
									:borderBottom="false" :padding="[0]">
									<slot name="default">
										<view class="fs-color__subtitle">￥</view>
									</slot>
								</fui-input>
							</fui-form-item>
						</view>
						<fui-form-item label="成本总和" labelWidth='200'>
							<fui-input v-model="item.costTotal" placeholder="成本金额输入自动计算" :borderBottom="false"
								:padding="[0]" disabled>
							</fui-input>
						</fui-form-item>

						<fui-section title="毛利" isLine lineWidth='4px' :marginTop="24"></fui-section>
						<view class="fs-flex fs-justify__between fs-flex__wrap">
							<fui-form-item label="其他收入" labelSize="26" style="width: 50%;" labelWidth='150'>
								<fui-input @blur="handleProfitInput($event,item,'qita_shouru')"
									v-model="item.profit.qita_shouru" size="26" type="digit" placeholder="请输入"
									:borderBottom="false" :padding="[0]">
									<slot name="default">
										<view class="fs-color__subtitle">￥</view>
									</slot>
								</fui-input>
							</fui-form-item>
							<fui-form-item label="注册收入" labelSize="26" style="width: 50%;" labelWidth='150'>
								<fui-input @blur="handleProfitInput($event,item,'zhuce_shouru')"
									v-model="item.profit.zhuce_shouru" size="26" type="digit" placeholder="请输入"
									:borderBottom="false" :padding="[0]">
									<slot name="default">
										<view class="fs-color__subtitle">￥</view>
									</slot>
								</fui-input>
							</fui-form-item>
							<fui-form-item label="园区注册" labelSize="26" style="width: 50%;" labelWidth='150'>
								<fui-input @blur="handleProfitInput($event,item,'yuanqu_zhuce')"
									v-model="item.profit.yuanqu_zhuce" size="26" type="digit" placeholder="请输入"
									:borderBottom="false" :padding="[0]">
									<slot name="default">
										<view class="fs-color__subtitle">￥</view>
									</slot>
								</fui-input>
							</fui-form-item>
							<fui-form-item label="注销收入" labelSize="26" style="width: 50%;" labelWidth='150'>
								<fui-input @blur="handleProfitInput($event,item,'zhuxiao_shouru')"
									v-model="item.profit.zhuxiao_shouru" size="26" type="digit" placeholder="请输入"
									:borderBottom="false" :padding="[0]">
									<slot name="default">
										<view class="fs-color__subtitle">￥</view>
									</slot>
								</fui-input>
							</fui-form-item>
							<fui-form-item label="高端收入" labelSize="26" style="width: 50%;" labelWidth='150'>
								<fui-input @blur="handleProfitInput($event,item,'gaoduan_shouru')"
									v-model="item.profit.gaoduan_shouru" size="26" type="digit" placeholder="请输入"
									:borderBottom="false" :padding="[0]">

									<slot name="default">
										<view class="fs-color__subtitle">￥</view>
									</slot>
								</fui-input>
							</fui-form-item>
							<fui-form-item label="外包收入" labelSize="26" style="width: 50%;" labelWidth='150'>
								<fui-input @blur="handleProfitInput($event,item,'waibao_shouru')"
									v-model="item.profit.waibao_shouru" size="26" type="digit" placeholder="请输入"
									:borderBottom="false" :padding="[0]">
									<slot name="default">
										<view class="fs-color__subtitle">￥</view>
									</slot>
								</fui-input>
							</fui-form-item>
							<fui-form-item label="资质收入" labelSize="26" style="width: 50%;" labelWidth='150'>
								<fui-input @blur="handleProfitInput($event,item,'zizhi_shouru')"
									v-model="item.profit.zizhi_shouru" size="26" type="digit" placeholder="请输入"
									:borderBottom="false" :padding="[0]">
									<slot name="default">
										<view class="fs-color__subtitle">￥</view>
									</slot>
								</fui-input>
							</fui-form-item>
							<fui-form-item label="代账费用" labelSize="26" style="width: 50%;" labelWidth='150'>
								<fui-input @blur="handleProfitInput($event,item,'daizhang_feiyong')"
									v-model="item.profit.daizhang_feiyong" size="26" type="digit" placeholder="请输入"
									:borderBottom="false" :padding="[0]">
									<slot name="default">
										<view class="fs-color__subtitle">￥</view>
									</slot>
								</fui-input>
							</fui-form-item>
							<fui-form-item label="刻章毛利" labelSize="26" style="width: 50%;" labelWidth='150'>
								<fui-input @blur="handleProfitInput($event,item,'kezhang_maoli')"
									v-model="item.profit.kezhang_maoli" size="26" type="digit" placeholder="请输入"
									:borderBottom="false" :padding="[0]">
									<slot name="default">
										<view class="fs-color__subtitle">￥</view>
									</slot>
								</fui-input>
							</fui-form-item>
							<fui-form-item label="社保公积金" labelSize="24" style="width: 50%;" labelWidth='150'>
								<fui-input @blur="handleProfitInput($event,item,'shebao_gongjijin')"
									v-model="item.profit.shebao_gongjijin" size="28" type="digit" placeholder="请输入"
									:borderBottom="false" :padding="[0]">
									<slot name="default">
										<view class="fs-color__subtitle">￥</view>
									</slot>
								</fui-input>
							</fui-form-item>
						</view>

						<fui-form-item label="扣除成本毛利总和" labelWidth='300'>
							<fui-input v-model="item.profitTotal" disabled placeholder="成本金额输入自动计算"
								:borderBottom="false" :padding="[0]"></fui-input>
						</fui-form-item>

						<fui-form-item label="毛利总额" labelWidth='180'>
							<fui-input v-model="item.grossTotal" disabled placeholder="请输入实际收入和成本自动计算"
								:borderBottom="false" :padding="[0]"></fui-input>
						</fui-form-item>
					</fui-card>
				</view>

				<view class="fs-flex fs-justify__center fs-py32">
					<fui-button @click="handleDelete" type="danger" class="fs-px32" btnSize="small"
						:disabled="formData.products.length<2">删除产品</fui-button>
					<fui-button @click="handleAdd" type="primary" class="fs-px32" btnSize="small">添加产品</fui-button>
				</view>
			</fui-form>
		</view>

		<fui-message ref="msgRef" background='red' ridus="12" top="80" left="32" right="32"></fui-message>
	</view>
</template>

<script setup>
	import { inject, ref, watch } from 'vue';
	import productTypePicker from './productTypePicker.vue';
	import accountEnableDate from './accountEnableDate.vue';
	import agencyStartDate from './agencyStartDate.vue';
	import agencyEndDate from './agencyEndDate.vue';
	import urgentPicker from './urgentPicker.vue';
	import { add, subtract } from 'pixiu-number-toolkit';
	import dayjs from 'dayjs'
	import { inputAmountToConvert } from '@/utils/utils.js'

	const formData = inject('formData')

	const handleDelete = () => {
		formData.value.products.splice(-1, 1)
	}

	const productItem = {
		product_type: '',
		product_subdivision: '',
		actual_payment: '',
		account_start_date: '',
		agency_start_month: '',
		agency_end_month: '',
		agency_months: '',
		register_region: '',
		is_urgent: '',
		cost: {
			kezhang_chengben: '',
			baoshui_ruanjian: '',
			shuzi_zhengshu: '',
			qudao_chengben: '',
			yuanqu_dizhi: '',
			jiaji_feiyong: '',
		},
		profit: {
			qita_shouru: '',
			zhuce_shouru: '',
			yuanqu_zhuce: '',
			zhuxiao_shouru: '',
			gaoduan_shouru: '',
			waibao_shouru: '',
			zizhi_shouru: '',
			daizhang_feiyong: '',
			kezhang_maoli: '',
			shebao_gongjijin: '',
		}
	}
	const handleAdd = () => {
		formData.value.products.push(JSON.parse(JSON.stringify(productItem)))
	}


	watch(() => formData.value.products, (arr) => {
		arr.forEach(item => {
			const {
				baoshui_ruanjian = 0, jiaji_feiyong = 0, kezhang_chengben = 0, qudao_chengben = 0,
					shuzi_zhengshu = 0, yuanqu_dizhi = 0
			} = item.cost
			item.costTotal = add(
				Number(baoshui_ruanjian), Number(jiaji_feiyong),
				Number(kezhang_chengben), Number(qudao_chengben),
				Number(shuzi_zhengshu), Number(yuanqu_dizhi)
			).toString()

			const {
				qita_shouru = 0, zhuce_shouru = 0, yuanqu_zhuce = 0,
					zhuxiao_shouru = 0, gaoduan_shouru = 0, waibao_shouru = 0,
					zizhi_shouru = 0, daizhang_feiyong = 0, kezhang_maoli = 0,
					shebao_gongjijin = 0
			} = item.profit
			item.profitTotal = add(
				Number(qita_shouru), Number(zhuce_shouru), Number(yuanqu_zhuce),
				Number(zhuxiao_shouru), Number(gaoduan_shouru), Number(waibao_shouru),
				Number(zizhi_shouru), Number(daizhang_feiyong),
				Number(kezhang_maoli), Number(shebao_gongjijin)
			)

			item.grossTotal = subtract(
				Number(item.actual_payment), Number(item.costTotal ? item.costTotal : 0)
			)
			if (item.agency_start_month && item.agency_end_month) {
				const end = dayjs(item.agency_end_month)
				item.agency_months = end.diff(item.agency_start_month, 'month') + 1
			}
		})
	}, { deep: true })

	const form2 = ref(null)
	defineExpose({ submit })
	async function submit() {
		const arr = formData.value.products
		for (let i = 0; i < arr.length; i++) {
			const item = arr[i]
			if (!item.product_type) {
				const text = `产品${i+1}-请选择产品类型`
				showMsg(text)
				return { isPassed: false, errorMsg: [text] }
			} else if (!item.actual_payment) {
				const text = `产品${i+1}-请输入实际收款`
				showMsg(text)
				return { isPassed: false, errorMsg: [text] }
			}
			if (item.profitTotal || item.grossTotal) {
				if (Number(item.profitTotal) !== Number(item.grossTotal)) {
					const text = `产品${i+1}-毛利总和与毛利总额不相等`
					showMsg(text)
					return { isPassed: false, errorMsg: [text] }
				}
			}

		}
		return { isPassed: true, errorMsg: [] }
	}

	const msgRef = ref(null)
	//调用此方法显示提示消息
	function showMsg(text) {
		let options = {}
		options.duration = 2000
		options.text = text
		msgRef.value.show(options)
	}

	const handleProfitInput = (e, item, filed) => {
		setTimeout(() => {
			item.profit[filed] = inputAmountToConvert(e.detail.value)
		}, 0)
	}

	const handleCostInput = (e, item, filed) => {
		setTimeout(() => {
			item.cost[filed] = inputAmountToConvert(e.detail.value)
		}, 0)
	}

	const handlePaymentInput = (e, item, filed) => {
		;
		setTimeout(() => {
			item[filed] = inputAmountToConvert(e.detail.value)
		}, 0)
	}
</script>

<style>
</style>